import React from 'react'
import { Icon } from 'antd-mobile'
import '../assets/css/FootBar_panel.css'
import love1 from '../assets/img/icon/love1.png'
import love2 from '../assets/img/icon/love2.png'
import more from '../assets/img/icon/more.png'

class FootBar extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loveState: false,
    }
  }
  render() {
    return (
      <div className="FootBar">
        <div
          onClick={() => {
            this.changeLoveState()
          }}
        >
          {this.state.loveState === true ? (
            <img
              src={love1}
              width="20px"
              height="20px"
              className="icons"
              alt="love1"
            />
          ) : (
            <img
              src={love2}
              width="20px"
              height="20px"
              className="icons"
              alt="love2"
            />
          )}
          收藏
        </div>
        <div>
          <div>
            <Icon type="check-circle" color="#27ACF3" size="xxs" />
            <span className="number_count success">29</span>
          </div>
          <div>
            <Icon type="cross-circle-o" color="#F3675F" size="xxs" />
            <span className="number_count error">6</span>
          </div>
        </div>
        <div>
          <img
            src={more}
            width="20px"
            height="20px"
            className="icons"
            alt="more"
          />
          1/155
        </div>
      </div>
    )
  }

  changeLoveState = () => {
    let nowState = this.state.loveState
    this.setState({
      loveState: !nowState,
    })
  }
}

export default FootBar
